<template>
    <el-radio-group v-model="selectedVal">
        <el-radio-button :label="value" v-for="(value, index) in values" :key="index">{{ labels[index] }}</el-radio-button>
    </el-radio-group>
</template>

<script>
export default {
    name: "radio",
    props: {
        value: {
            type: [String, Number, Boolean],
            default () {
                return 0;
            }
        },
        labels: {
            type: Array,
            default () {
                return ['关', '开'];
            },
        },
        values: {
            type: Array,
            default () {
                return [0, 1];
            }
        }
    },
    data () {
        return {
            selectedVal: '',
        };
    },
    watch: {
        value() {
            this.syncForm();
        },
        selectedVal() {
            this.$emit('input', this.selectedVal);
        }
    },
    methods: {
        syncForm() {
            this.selectedVal = this.value;
        },
    },
    created() {
        this.syncForm();
    }
}
</script>

<style scoped>

</style>
